<template>
  <div id="main">
    <!-- 锚点 -->
    <div class="card">
      <el-button type="primary" size="medium"><a href="#bar1">立体柱状图-1</a></el-button>
      <el-button type="primary" size="medium"><a href="#bar2">立体柱状图-2</a></el-button>
      <el-button type="primary" size="medium"><a href="#bar31">立体柱状图-31</a></el-button>
      <el-button type="primary" size="medium"><a href="#bar32">立体柱状图-32</a></el-button>
      <el-button type="primary" size="medium"><a href="#bar4">立体柱状图-4</a></el-button>
    </div>
    <!-- 立体柱状图-1  -------------------  效果 -->
    <el-divider id="bar1"></el-divider>
    <el-card class="box-card">
      <div slot="header">立体柱状图-1</div>
      <div class="data">
        <div class="item">yData ------ {{ bar1Obj.yData }}</div>
      </div>
      <bar1 :dataObj="bar1Obj" />
    </el-card>
    <!-- 立体柱状图-2  -------------------  效果 -->
    <el-divider id="bar2"></el-divider>
    <el-card class="box-card">
      <div slot="header">立体柱状图-2</div>
      <div class="data">
        <div class="item">yData1 ------ {{ bar2Obj.yData1 }}</div>
        <div class="item">yData2 ------ {{ bar2Obj.yData2 }}</div>
        <div class="item">yData3 ------ {{ bar2Obj.yData3 }}</div>
      </div>
      <bar2 :dataObj="bar2Obj" />
    </el-card>
    <!-- 立体柱状图-31  -------------------  效果 -->
    <el-divider id="bar31"></el-divider>
    <el-card class="box-card">
      <div slot="header">立体柱状图-31</div>
      <div class="data">
        <div class="item">yData1 ------ {{ bar31Obj.yData1Obj.yData }}</div>
        <div class="item">yData2 ------ {{ bar31Obj.yData2Obj.yData }}</div>
        <div class="item">yData3 ------ {{ bar31Obj.yData3Obj.yData }}</div>
      </div>
      <bar31 :dataObj="bar31Obj" />
    </el-card>
    <!-- 立体柱状图-32  -------------------  效果 -->
    <el-divider id="bar32"></el-divider>
    <el-card class="box-card">
      <div slot="header">立体柱状图-32</div>
      <div class="data">
        <div class="item">yData1 ------ {{ bar32Obj.yData1Obj.yData }}</div>
        <div class="item">yData2 ------ {{ bar32Obj.yData2Obj.yData }}</div>
        <div class="item">yData3 ------ {{ bar32Obj.yData3Obj.yData }}</div>
      </div>
      <bar32 :dataObj="bar32Obj" />
    </el-card>
    <!-- 立体柱状图-4  -------------------  效果 -->
    <el-divider id="bar4"></el-divider>
    <el-card class="box-card">
      <div slot="header">立体柱状图-4</div>
      <div class="data">
        <div class="item">yData1 ------ {{ bar4Obj.yData1Obj.yData }}</div>
        <div class="item">yData2 ------ {{ bar4Obj.yData2Obj.yData }}</div>
        <div class="item">yData3 ------ {{ bar4Obj.yData3Obj.yData }}</div>
      </div>
      <bar4 :dataObj="bar4Obj" />
    </el-card>

  </div>
</template>

<script>
import bar1 from '@/components/echarts/echartsDemo/common/bar1.vue'
import bar2 from '@/components/echarts/echartsDemo/common/bar2.vue'
import bar31 from '@/components/echarts/echartsDemo/common/bar31.vue'
import bar32 from '@/components/echarts/echartsDemo/common/bar32.vue'
import bar4 from '@/components/echarts/echartsDemo/common/bar4.vue'

export default {
  components: { bar1, bar2, bar31, bar32, bar4 },
  data() {
    return {
      bar1Obj: {
        xData: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'],
        legend: ['淘宝'],
        yData: [0, 56, 15, 10, 8, 0, 0], // 淘宝
        offset: { offsetX: 15, offsetY: 8 }
      },
      bar2Obj: {
        xData: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'],
        legend: ['淘宝', '京东', '天猫'],
        yData1: [0, 15, 15, 15, 15, 0, 0], // 淘宝
        yData2: [0, 0, 30, 0, 30, 0, 30], // 京东
        yData3: [0, 20, 20, 0, 0, 30, 0], // 天猫
        colorTop: ['#EEB478', '#66D6F9', '#91E5B0'],
        colorBar: ['#BD8E68', '#68B2EF', '#62C886'],
        offset: { offsetX: 13, offsetY: 6 }
      },
      bar3Obj: {
        xData: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'],
        legend: ['淘宝'],
        yData: [0, 56, 15, 10, 8, 0, 0], // 淘宝
        offset: { offsetX: 15, offsetY: 8 }
      },
      bar31Obj: {
        xData: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'],
        legend: ['淘宝', '京东', '天猫'],
        yData1Obj: {
          yData: [16, 15, 10, 15, 0, 10, 0], // 淘宝
          colorLeft: ['#004B76', '#004B76'],
          colorRight: ['#0C83A0', '#0C83A0'],
          colorTop: ['#5cc4eb', '#5cc4eb']
        },
        yData2Obj: {
          yData: [0, 0, 10, 0, 10, 0, 5], // 京东
          colorLeft: ['#72510B', '#72510B'],
          colorRight: ['#AD7E19', '#AD7E19'],
          colorTop: ['#DBA803', '#DBA803']
        },
        yData3Obj: {
          yData: [8, 0, 12, 8, 10, 15, 0], // 天猫
          colorLeft: ['#029988', '#029988'],
          colorRight: ['#00D7BA', '#00D7BA'],
          colorTop: ['#00FFDB', '#00FFDB']
        },
        offset: { offsetX: 20, offsetY: 8 }
      },
      bar32Obj: {
        xData: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'],
        legend: ['淘宝', '京东', '天猫'],
        yData1Obj: {
          yData: [16, 15, 12, 15, 0, 0, 0], // 淘宝
          colorLeft: ['#004B76', '#004B76'],
          colorRight: ['#0C83A0', '#0C83A0'],
          colorTop: ['#5cc4eb', '#5cc4eb']
        },
        yData2Obj: {
          yData: [10, 0, 10, 0, 10, 0, 15], // 京东
          colorLeft: ['#72510B', '#72510B'],
          colorRight: ['#AD7E19', '#AD7E19'],
          colorTop: ['#DBA803', '#DBA803']
        },
        yData3Obj: {
          yData: [0, 0, 12, 8, 10, 15, 0], // 天猫
          colorLeft: ['#029988', '#029988'],
          colorRight: ['#00D7BA', '#00D7BA'],
          colorTop: ['#00FFDB', '#00FFDB']
        },
        offset: { offsetX: 20, offsetY: 8 }
      },
      bar4Obj: {
        xData: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'],
        legend: ['淘宝', '京东', '天猫'],
        yData1Obj: {
          yData: [16, 15, 12, 15, 0, 0, 0], // 淘宝
          colorTop: ['#3DD4FF', '#3DD4FF'],
          colorBar: ['#31ABCC', '#31C8CC'],
          colorBottom: ['#3DF4FF', '#3DF4FF']
        },
        yData2Obj: {
          yData: [10, 0, 10, 0, 10, 0, 15], // 京东
          colorTop: ['#FEB61B', '#FEB61B'],
          colorBar: ['#CB9516', '#C5C816'],
          colorBottom: ['#F7EF1B', '#F7EF1B']
        },
        yData3Obj: {
          yData: [0, 0, 12, 8, 10, 15, 0], // 天猫
          colorTop: ['#1AFF79', '#1AFF79'],
          colorBar: ['#14CB64', '#11C096'],
          colorBottom: ['#16F2AF', '#16F2AF']
        },
        offset: { offsetX: 20, offsetY: 8 }
      },
    }
  },
  mounted() { },
  methods: {}
}

</script>
<style scoped>
.card {
  width: 10%;
  height: 75%;
  background: #eee;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  border: 1px solid #888;
  position: fixed;
  top: 150px;
  right: 50px;
  z-index: 10;
}

.box-card {
  width: 85%;
  margin-bottom: 20px;
}

.data {
  display: flex;
  justify-content: space-around;
  display: none;
}
</style>
